<script setup>
import { ref } from 'vue'
import Modal from './Modal.vue'
import Button from './Button.vue'
import { SendOutlined } from '@ant-design/icons-vue'
import { validEmail } from '@/utils/valid'
import { message } from 'ant-design-vue'
import { sendMemberDiscountCodeApi } from '@/api'
const modalRef = ref()
const email = ref('')
// 提交发送优惠券
const sendCoupon = () => {
  validEmail('', email.value)
    .then(() => {
      sendMemberDiscountCodeApi({ email: email.value }).then(() => {
        message.success('Send Success')
        close()
      })
    })
    .catch((err) => {
      message.error(err)
    })
}
const open = () => {
  modalRef.value.open()
}
const close = () => {
  modalRef.value.close()
}
defineExpose({ open, close })
</script>
<template>
  <Modal ref="modalRef">
    <div
      class="modal-content flex flex-col gap-7 items-center text-white text-center p-15 max-[500px]:p-3"
    >
      <div class="leading-loose text-3xl z-1 max-[560px]:text-xl">
        <div>New Here? Get a 10%</div>
        <div>Coupon For Your First Order..</div>
      </div>
      <div class="flex items-center gap-3 z-1 w-[80%] max-[500px]:flex-col">
        <a-input v-model:value="email" type="email" placeholder="Email" :bordered="false" />
        <Button class="h-[50px]" bg="#f9a044" @click="sendCoupon">
          SUBSCRIBE
          <SendOutlined />
        </Button>
      </div>
      <div class="text-[10px] text-[#999] cursor-pointer hover:underline z-1" @click="close">
        no thanks.
      </div>
    </div>
  </Modal>
  <!-- <a-modal
    width="70%"
    v-model:open="isVisible"
    :footer="null"
    :closable="false"
    :maskClosable="false"
    :destroyOnClose="true"
    :keyboard="false"
  >
    <div
      class="p-15 bg-amber-300 border-[10px] border-[#ccc] modal-content flex flex-col gap-7 items-center text-white text-center max-[500px]:p-3"
    >
      <CloseOutlined
        class="z-1 text-[30px] text-[#999] right-5 absolute top-5 max-[500px]:text-[20px] cursor-pointer"
        @click="close"
      />
      <div class="leading-loose text-3xl z-1 max-[560px]:text-xl">
        <div>New Here? Get a 5%</div>
        <div>Coupon For Your First Order..</div>
      </div>
      <div class="flex items-center gap-3 z-1 w-[80%] max-[500px]:flex-col">
        <a-input v-model:value="email" type="email" placeholder="Email" :bordered="false" />
        <Button class="h-[50px]" bg="#f9a044" @click="sendCoupon">
          SUBSCRIBE
          <SendOutlined />
        </Button>
      </div>
      <div class="text-[10px] text-[#999] cursor-pointer hover:underline z-1" @click="close">
        no thanks.
      </div>
    </div>
  </a-modal> -->
</template>
<style lang="scss" scoped>
:global(.ant-modal .ant-modal-content) {
  border-radius: 0 !important;
  padding: 0 !important;
}
.modal-content {
  position: relative;
  background: url('@/assets/icons/subscribe-image.jpg') no-repeat center center;
  &::after {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    background-color: rgba(0, 0, 0, 0.6);
  }
  .ant-input {
    height: 50px;
    background-color: #fff;
  }
}
:global(.ant-modal) {
  max-width: 800px !important;
}
@media (max-width: 800px) {
  :global(.ant-modal) {
    width: 90% !important;
    max-width: none;
  }
}
</style>
